<template>

    <div class="order">
        <form action="" @submit.prevent="add">
            <div class="common-form">
                <div class="order-user">
                    <div class="order-add-user">
                        <label>收货人</label>
                        <input type="text" placeholder="收货人" v-model="name"/>
                    </div>
                    <div class="order-add-user">
                        <label for="">手机号码</label>
                        <input type="text" placeholder="手机号码" v-model="tel"/>
                    </div>
                    <div class="order-add-user">
                        <label for="">所在地区</label>
                        <!-- <input type="text" placeholder="省，市 ，县 ，区 等" /> -->
                        <div class="city">
                            <v-distpicker :province="select.province" :city="select.city" :area="select.area" @selected="onSelected"></v-distpicker>
                        </div>
                        <!-- <v-distpicker province="广东省" city="广州市" area="海珠区" type="mobile"></v-distpicker> -->
                    </div>
                    <div class="order-add-user-textarea">
                        <label for="">详细地址</label>
                        <textarea placeholder="街道，居住地 等" v-model="address"></textarea>
                    </div>
                </div>
            </div>
            <!-- <v-distpicker type="mobile" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker> -->
            <!-- <v-distpicker @selected="onSelected"></v-distpicker> -->
            <!-- <div class="common-form">
                <div class="order-select-info">
                    <em class="order-select"></em>
                    <div class="order-select-info-name">
                        设为默认地址
                    </div>
                    <div class="order-add-info-add">
                        <span>提示：每次下单时使用该地址</span>
                    </div>
                </div>
            </div> -->
            <div class="footer-100"></div>
            <!-- 支付 -->
            <button class="btn-big"  type="submit" >保存</button>
        </form>
	</div>
</template>

<script>
import axios from "axios";
import qs from 'qs'
import url from 'url'
import VDistpicker from 'v-distpicker'

    export default {
        name:'AddressAdd',
        data () {
            return {
                name:'',
                tel:'',
                address:'',
                select: { province: '广东省', city: '广州市', area: '海珠区' },
                // province:'',
                // city:'',
                // area:'',
            }
        },
        components: { VDistpicker },
        methods:{
            //获取地址
            onSelected:function(data){
                // console.log(this.select.province)
                console.log(data)
                this.select.area = data.area.value
                this.select.city = data.city.value
                this.select.province = data.province.value
            },
            //添加地址
            add:function(){
                var that = this
                var openid = localStorage.getItem("openid")
                if(that.tel == '' || that.name == '' || this.select.province == '' || that.address == '' || this.select.city == ''){
                    alert('信息不能为空')
                }else{
                    var upload = {
                        openid:openid,
                        name:that.name,
                        tel:that.tel,
                        area:this.select.area,
                        city:this.select.city,
                        province:this.select.province,
                        address:that.address,
                    }
                    this.$http.post('/vipmember/index/addAddress',qs.stringify(upload)).then(rs=>{
                        console.log(rs.data)
                        if( rs.data.status == 400){
                            alert('添加失败')
                        }else{
                            // that.$router.push({name:'AddressList'});
                            that.$router.back(-1)
                        }
                    }).catch(err=>{
                        console.log(err)
                    })
                }
            },
        },
        mounted(){
           this.onSelected();
        }
    }
</script>

<style scoped>
.btn-big{
    width: 100%;
    height: 49px;
    line-height: 49px;
    text-align: center;
    color: #FFF;
    background: #FE2746;
    position: fixed;
    bottom: 0;
    left: 0;   
    border:0;
}

select{
    font-size: 13px !important;
}
.city select{
    width:30%;
    float: left;
}
.city{
    width:75%;
    display: inline-block;
    float: left;
}
.distpicker-address-wrapper{
    width: 100%;
    display: inline-block;
    float: left;
}
</style>